<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <style>
        p {
            height: 300px;
            border: solid;
        }
    </style>
</head>

<body>

    <p>p1</p>
    <p>p2</p>
    <p>p3</p>
    <p>p4</p>
    <p>p5</p>
    <p style="width: 1000px;">p6</p>
    <script>

        // console.log(document.documentElement.clientHeight, document.documentElement.clientWidth);
        console.log(document.documentElement.scrollHeight, document.documentElement.scrollWidth);
        console.log(document.body.scrollHeight, document.body.scrollWidth);
        console.log(document.body.offsetHeight, document.body.offsetWidth);
        console.log(window.innerHeight, window.innerWidth);

        setTimeout(() => {
            console.log(window.pageYOffset);
            console.log(window.pageXOffset);
        }, 4000);

    </script>
</body>

</html>